<template>
  <div class="root">
    <h1>课件管理</h1>
    <div class="form-box" style="width: 100%;">
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
          @submit="login"
      >
        <a-form-item
            label="账号"
            name="username"
            :rules="[{ required: true, message: '请输入账号' }]"
        >
          <a-input v-model:value="formState.username"/>
        </a-form-item>

        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password v-model:value="formState.password"/>
        </a-form-item>
        <a-button class="login" type="primary" html-type="submit">登录</a-button>
        <a-button type="link" @click="showRegistry">没有账号？去注册</a-button>
      </a-form>
    </div>
    <a-modal v-model:visible="registryModalShow" title="注册" @ok="registryCommit" :destroyOnClose="true">
      <RegistryForm ref="registryRef"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import {loginApi} from "@/apis/global";
import {message} from "ant-design-vue";
import {useUserStore} from '@/stores/user'
import {loadRoute} from "@/router";
import {useRouter} from "vue-router";
import RegistryForm from '@/components/LoginView/RegistryForm.vue';

const userStore = useUserStore();
const router = useRouter();

const formState = reactive({
  username: '',
  password: ''
})

const login = async () => {
  const {data} = await loginApi(formState.username, formState.password)
  if (data.code === 1) {
    message.success('登录成功')
    localStorage.setItem('token', data.data.token)
    userStore.setUserInfo(data.data)
    const check = await loadRoute();
    router.push(check);
  } else {
    message.error(data.msg)
  }
}

const registryModalShow = ref(false);
const showRegistry = () => {
  registryModalShow.value = true;
}
const registryRef = ref();
const registryCommit = async () => {
  await registryRef.value.commit();
  registryModalShow.value = false;
}

</script>

<style scoped lang="less">

.root {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-image: linear-gradient(135deg, #076585, #fff);
}

.form-box {
  width: 100%;
  margin-top: 32px;
  display: flex;
  justify-content: center;

}

:deep(.form-box) {
  .ant-form {
    width: 300px;
  }

  .ant-input-affix-wrapper, input {
    border-radius: 32px;
  }
}

.login {
  width: 100%;
  border-radius: 32px;
}
</style>
